<template>
    <el-row class="lives-news">
        <el-row class="title">
            <h3>在线会员管理</h3>
        </el-row>
        <el-row>
            <el-form :inline="true">
                <!-- <el-form-item>
                    <el-button type="primary" @click="showAddDialog"><i class="el-icon-plus el-icon--left"></i>添加在线会员</el-button>
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" @click="saveOnlineUser">保存</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row>
            <el-form :model="userList" label-width="60px" :inline="true">
                <el-form-item v-for="(user, index) in userList.list" :label="'会员'+(index + 1)" :key="index">
                    <el-input v-model="user.name" class="username"></el-input>
                    <el-button @click.prevent="removeUser(user)" type="danger">删除</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="addUser" type="primary">新增</el-button>
                </el-form-item>
            </el-form>
        </el-row>
    </el-row>
</template>
<script>
import {
    getOnlineRobotList,
    setOnlineUser
} from '@/api/api'
export default {
    data: function() {
        return {
            userList: {
                list: []
            },
            id: 0
        }
    },
    created: function() {
        this.getUsers();
    },
    methods: {
        getUsers: function() {
            getOnlineRobotList().then(res => {
                this.userList.list = res;
                this.id = res.length
            })
        },
        addUser: function(){
            this.userList.list.push({
                name: '',
                level: '普通',
                userId: new Date().getTime().toString()
            })
        },
        removeUser: function(item){
            var index = this.userList.list.indexOf(item)
            if (index !== -1) {
              this.userList.list.splice(index, 1)
            }
        },
        saveOnlineUser: function(){
            var list = this.userList.list;
            list.forEach((item, index) => {
                if(!item.name){
                    list.splice(index, 1)
                }
            })
            setOnlineUser(list).then(res => {
                this.$message({
                    type: 'success',
                    message: '保存成功'
                })
            })
        }
    }
}
</script>
<style scoped lang="scss">
.lives-news {
    .title {
        font-size: 12px;
        border-bottom: 1px solid #eaeaea;
        margin-bottom: 5px;
        h3 {
            display: inline-block;
            padding: 5px 0;
            margin: 0;
            font-weight: normal;
            color: #23b7e5;
            border-bottom: 1px solid #23b7e5;
        }
    }
    .username{
        width: 120px;
    }
}
</style>